<template>
	<view class="memberGift">
		<scroll-view :style="{ height: mainHeight }" scroll-y class="scrollView">
			<view class="recommend">
				<view v-for="(item, index) in recommend" :key="index" class="recommendi">
					<view class="image">
						<image :src="item.image" mode=""></image>
					</view>
					<view class="name">{{item.name}}</view>
					<view class="leftRight">
						<view class="left">
							<view class="introduce">
								<span>净含量：{{item.ml}}</span>
								<span>销量：{{item.salesVolume}}</span>
							</view>
							<view class="price">
								{{'￥'+ item.price}}
							</view>
						</view>
						<view class="right">
							<u-icon name="plus" color="#fff" size="15"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				recommend: [{
					image: '../../static/images/home/Snipaste_2024-11-18_16-14-45.png',
					name: '淡斑护肤品套装',
					ml: '30ml',
					salesVolume: 6,
					price: 949,
					vipPrice: 888
				}, {
					image: '../../static/images/home/Snipaste_2024-11-18_16-14-45.png',
					name: '淡斑护肤品套装',
					ml: '30ml',
					salesVolume: 6,
					price: 949,
					vipPrice: 888
				}, {
					image: '../../static/images/home/Snipaste_2024-11-18_16-14-45.png',
					name: '淡斑护肤品套装',
					ml: '30ml',
					salesVolume: 6,
					price: 949,
					vipPrice: 888
				}, {
					image: '../../static/images/home/Snipaste_2024-11-18_16-14-45.png',
					name: '淡斑护肤品套装',
					ml: '30ml',
					salesVolume: 6,
					price: 949,
					vipPrice: 888
				}, {
					image: '../../static/images/home/Snipaste_2024-11-18_16-14-45.png',
					name: '淡斑护肤品套装',
					ml: '30ml',
					salesVolume: 6,
					price: 949,
					vipPrice: 888
				}, {
					image: '../../static/images/home/Snipaste_2024-11-18_16-14-45.png',
					name: '淡斑护肤品套装',
					ml: '30ml',
					salesVolume: 6,
					price: 949,
					vipPrice: 888
				}, {
					image: '../../static/images/home/Snipaste_2024-11-18_16-14-45.png',
					name: '淡斑护肤品套装',
					ml: '30ml',
					salesVolume: 6,
					price: 949,
					vipPrice: 888
				}]
			}
		},
		async onLoad() {
			this.mainHeight = this.$store.getters.heightData.noTabMainHeight
			// this.statusBarHeight = wx.getSystemInfoSync().statusBarHeight
		},
		methods: {

		}
	}
</script>

<style lang="less" scoped>
	.memberGift {
		width: 100%;
		height: 100%;
		overflow-y: auto;
		padding: 0 28rpx;
		background-color: #fff;

		.scrollView {
			width: 100%;

			// height: 100%;
			.recommend {
				width: 100%;
				height: 100%;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
			}

			.recommendi {
				width: 48%;
				margin: 20rpx 0;
				position: relative;

				.image {
					width: 100%;
					height: 335rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 20%;
					}
				}

				.name {
					width: 100%;
					height: 55rpx;
					font-size: 28rpx;
					line-height: 55rpx;
					font-weight: 600;
				}

				.leftRight {
					display: flex;
					position: relative;

					.left {
						.text {
							color: #858585;
						}

						.price {
							width: 100%;
							height: 60rpx;
							font-size: 35rpx;
							line-height: 60rpx;
							font-weight: 600;
						}
					}

					.right {
						position: absolute;
						width: 20px;
						height: 20px;
						background-color: #FF4254;
						border-radius: 3px;
						bottom: 0;
						right: 2px;
						display: flex;
						align-items: center;
						justify-content: center;
					}

				}

			}
		}
	}
</style>